<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Overlay Demo</title>
</head>
<link href="../overlay.css" type="text/css" rel="stylesheet"/>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=EVTBZ-7ATRO-766W5-SLKCA-HPG62-GMBND"
        type="text/javascript" charset="utf-8"></script>
<script src="../overlay.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
</style>

<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
    function initMap() {
        let map = new TMap.Map("container", {
            center: new TMap.LatLng(36.314381, 118.106526),
            zoom: 7
        });

        new Overlay({
            map,
            position: new TMap.LatLng(36.87572293531615, 118.75128627246092),
            className: 'map-blue',
            title: '潍坊寿光银座门口',
            content: 5,
            onClick: () => {
                console.log('潍坊寿光银座门口')
            }
        });
        new Overlay({
            map,
            position: new TMap.LatLng(35.4215529992504, 116.60098076289364),
            className: 'map-midumseagreen',
            title: '济宁仙营绿地东邮局',
            content: 3,
            onClick: () => {
                console.log('济宁仙营绿地东邮局')
            }
        });
    }
</script>
</body>
</html>
